<template>
    <div>
        <van-cell-group>
            <div style="position: relative;">
                <van-cell title="头像">
                    <div slot="right-icon">
                        <div class="avatar">
                            <img v-bind:src="iconPath | image" />
                        </div>
                    </div>
                </van-cell>
                <input type="file" style="position: absolute; top: 0;left: 0; right: 0;bottom: 0; opacity: 0; width: 100%;" accept="image/*" @change="onRead" >
            </div>
        </van-cell-group>

       <van-button type="primary" style="display: block; margin: 30px auto; width: 90%;" @click="submit">确认修改</van-button>
    </div>
</template>

<script>
import axios from 'axios';
import defaultImg from './../../../assets/avata.png';
export default {
    name: 'editInfo',
    filters: {
        image(value) {
            if (!value) {
                return defaultImg
            }

            if (value.indexOf('http') !== -1) {
                return value;
            } 

            return `/images/${value}`;
        }
    },
    data() {
        return {
            defaultImg,
            iconPath: '', //头像
        }
    },

    methods: {
        onRead({srcElement}) {
            let fm = new FormData();
            fm.append('useType', 'userLogo');
            fm.append('imageFile', srcElement.files[0]);
            let request = axios.create();
            let url = '/tool/image/front/uploadImage';
            this.$toast.loading({duration: 0, forbidClick: true});
            let contentType = 'multipart/form-data; boundary=-------' + new Date().getTime()
            request.post(url, fm, {headers: {'Content-Type': contentType}}).then(res => {
                this.$toast.clear();
                res = res.data;
                if (res.status === 0) {
                    this.iconPath = res.data;
                } else {
                    this.$toast.fail(res.message);
                }
            })
        },

        submit() {
            let params = {
                iconPath: this.iconPath, //头像
            };

            if (params.iconPath === '') {
                this.$toast('请选择图片');
                return;
            }
            this.$http.post('/user/user/front/modifyUser', params).then(res => {
                if (res.status === 0) {
                    this.$store.dispatch('getUserInfo', this.$store.state.userInfo.token).then(() => {
                        this.$toast.success('修改成功');
                        setTimeout(() => {
                            this.$router.back();
                        }, 700)
                    })
                } else {
                    this.$toast.fail(res.messasge);
                }
            })
        }
    },

    created() {
        if (this.$route.query.avatar) {
            this.iconPath = this.$route.query.avatar;
        }
        console.log(this.defaultImg)
    }
}
</script>

<style lang="scss">
.avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
    }
}
</style>
